<!--
  ~ Licensed to the Apache Software Foundation (ASF) under one or more
  ~ contributor license agreements.  See the NOTICE file distributed with
  ~ this work for additional information regarding copyright ownership.
  ~ The ASF licenses this file to You under the Apache License, Version 2.0
  ~ (the "License"); you may not use this file except in compliance with
  ~ the License.  You may obtain a copy of the License at
  ~
  ~    http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  ~
  -->
<div *ngIf="!showFileSelecion">
    <button mat-button mat-flat-button (click)="add()">
        <mat-icon class="icon">add</mat-icon>
        <span>Add</span>
    </button>
    <button mat-button mat-flat-button (click)="selectFileSelection()">
        <mat-icon class="icon">add</mat-icon>
        <span>Import from file</span>
    </button>
</div>
<div *ngIf="showFileSelecion">
    <button mat-button mat-flat-button (click)="closeFileSelection()">
        <mat-icon class="icon">arrow_back</mat-icon>
        <span>Back</span>
    </button>
    <div fxFlex="100" style="margin: 5px; width: 100%">
        <mat-form-field
            style="width: 95%"
            (click)="fileInput.click()"
            color="accent"
            *ngIf="!hasError"
        >
            <input matInput placeholder="File" disabled />
            <input
                #fileInput
                type="file"
                style="display: none"
                data-cy="sp-file-management-file-input"
                (change)="handleFileInput($event.target)"
            />
            <div>
                {{ fileName }}
                <mat-progress-bar
                    mode="indeterminate"
                    *ngIf="processingFile"
                ></mat-progress-bar>
            </div>
            <button color="accent" matSuffix mat-button style="min-width: 0px">
                <mat-icon>insert_drive_file</mat-icon>
            </button>
        </mat-form-field>
        <mat-error *ngIf="hasError">
            {{ errorMessage }}
        </mat-error>
    </div>
</div>
